<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-container style="width: 100%;background: white">
            <el-header>
                <div style="width: 1000px;background: olivedrab">
                    <div style="margin-top: 15px;width: 700px;float:left;">
                        <el-form :inline="true"  class="demo-form-inline">
                            <el-form-item label="商品名称">
                                <el-input v-model="searchName" placeholder="请输入商品名称"></el-input>
                            </el-form-item>
                            <el-form-item label="品牌">
                                <el-select v-model="searchBrand" placeholder="请选择品牌">
                                    <el-option label="请选择"  value="0"></el-option>
                                    <el-option v-for="b in brandList" :label="b.brandName" :value="b.brandId"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="search">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div style="float: right;margin-top: 15px">
                        <el-button type="primary" plain @click="addFormView = true">添加商品</el-button>
                        <el-button type="danger" plain @click="removeAll">批量删除</el-button>
                    </div>

                    <!--添加商品模态框-->
                    <el-dialog
                            title="添加商品"
                            :visible.sync="addFormView"
                            width="40%">
                        <el-form :model="addForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="商品名称" prop="goodsName">
                                <el-input v-model="addForm.goodsName" placeholder="商品名称"></el-input>
                            </el-form-item>
                            <el-form-item label="设置价格" required>
                                <el-col :span="11">
                                    <el-form-item prop="originalPrice">
                                        <el-input placeholder="初始价格" v-model.number="addForm.originalPrice"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col class="line" :span="2">-</el-col>
                                <el-col :span="11">
                                    <el-form-item prop="salePrice">
                                        <el-input placeholder="售价" v-model.number="addForm.salePrice" style="width: 100%;"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="库存量" required>
                                <el-col :span="11">
                                    <el-form-item prop="storeCount">
                                        <el-input placeholder="请设置初始库存量" v-model.number="addForm.storeCount"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="选择品牌" prop="brandId" required>
                                <el-select v-model.number="addForm.brandId" placeholder="请选择品牌">
                                    <el-option v-for="b in brandList" :label="b.brandName" :value="b.brandId"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="一级分类" prop="productTypeId" required>
                                <el-select v-model.number="addForm.productTypeId" placeholder="请选择商品一级分类">
                                    <el-option v-for="pt in productTypeList" :label="pt.productTypeName" :value="pt.productTypeId"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="二级分类" prop="goodTypeId" required>
                                <el-select v-model.number="addForm.goodTypeId" placeholder="请选择商品二级分类">
                                    <el-option v-for="gt in goodsTypeList" :label="gt.goodsTypeName" :value="gt.goodsTypeId"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="供应商" prop="productFactory">
                                <el-input v-model="addForm.productFactory" placeholder="请输入供应商名称"></el-input>
                            </el-form-item>
                            <el-form-item label="生产日期" required>
                                <el-col :span="11">
                                    <el-form-item prop="productTime">
                                        <el-date-picker type="date" placeholder="请选择生产日期" v-model="addForm.productTime" style="width: 100%;"></el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="保质期(天)" required>
                                <el-col :span="11">
                                    <el-form-item prop="shelfLife">
                                        <el-input placeholder="请输入保质期" v-model.number="addForm.shelfLife"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="立即上架" prop="goodsStatus">
                                <el-switch v-model="status1"></el-switch>
                            </el-form-item>

                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" class="avatar">
                            </el-dialog>
                            <el-form-item label="商品描述" prop="description">
                                <el-input type="textarea" placeholder="请输入商品描述" v-model="addForm.description"></el-input>
                            </el-form-item>

                            <!--上传图片-->
                            <el-form-item label="添加图片">
                                <el-input type="hidden" v-model="addForm.cover"></el-input>
                                <el-upload
                                        class="avatar-uploader"
                                        action="http://localhost:8081/goods/upload"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload"
                                        name="cover">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                                <el-button @click="resetForm('ruleForm')">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>

                    <!--修改商品模态框-->
                    <el-dialog
                            title="添加商品"
                            :visible.sync="modifyFormView"
                            width="40%">
                        <el-form :model="modifyForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="商品名称" prop="goodsName">
                                <el-input v-model="modifyForm.goodsName" placeholder="商品名称"></el-input>
                            </el-form-item>
                            <el-form-item label="设置价格" required>
                                <el-col :span="11">
                                    <el-form-item prop="originalPrice">
                                        <el-input placeholder="初始价格" v-model.number="modifyForm.originalPrice"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col class="line" :span="2">-</el-col>
                                <el-col :span="11">
                                    <el-form-item prop="salePrice">
                                        <el-input placeholder="售价" v-model.number="modifyForm.salePrice" style="width: 100%;"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="库存量" required>
                                <el-col :span="11">
                                    <el-form-item prop="storeCount">
                                        <el-input placeholder="请设置初始库存量" v-model.number="modifyForm.storeCount"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="选择品牌" prop="brandId" required>
                                <el-select v-model.number="modifyForm.brandId" placeholder="请选择品牌">
                                    <el-option v-for="b in brandList" :label="b.brandName" :value="b.brandId"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="一级分类" prop="productTypeId" required>
                                <el-select v-model.number="modifyForm.productTypeId" placeholder="请选择商品一级分类">
                                    <el-option v-for="pt in productTypeList" :label="pt.productTypeName" :value="pt.productTypeId"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="二级分类" prop="goodTypeId" required>
                                <el-select v-model.number="modifyForm.goodTypeId" placeholder="请选择商品二级分类">
                                    <el-option v-for="gt in goodsTypeList" :label="gt.goodsTypeName" :value="gt.goodsTypeId"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="供应商" prop="productFactory">
                                <el-input v-model="modifyForm.productFactory" placeholder="请输入供应商名称"></el-input>
                            </el-form-item>
                            <el-form-item label="生产日期" required>
                                <el-col :span="11">
                                    <el-form-item prop="productTime">
                                        <el-date-picker type="date" placeholder="请选择生产日期" v-model="modifyForm.productTime" style="width: 100%;"></el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="保质期(天)" required>
                                <el-col :span="11">
                                    <el-form-item prop="shelfLife">
                                        <el-input placeholder="请输入保质期" v-model.number="modifyForm.shelfLife"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="是否上架" prop="goodsStatus">
                                <el-switch v-model="status1"></el-switch>
                            </el-form-item>

                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" class="avatar">
                            </el-dialog>
                            <el-form-item label="商品描述" prop="description">
                                <el-input type="textarea" placeholder="请输入商品描述" v-model="modifyForm.description"></el-input>
                            </el-form-item>

                            <!--上传图片-->
                            <el-form-item label="商品图片">
                                <el-input type="hidden" v-model="modifyForm.cover"></el-input>
                                <el-upload
                                        class="avatar-uploader"
                                        action="http://localhost:8081/goods/upload"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload"
                                        name="cover">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="modifyGoods('ruleForm')">提交</el-button>
                                <el-button @click="cancelModify()">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </div>
            </el-header>
            <el-main>
                <div>
                    <template>
                        <!--表格数据-->
                        <el-table
                                ref="multipleTable"
                                :data="tableData"
                                tooltip-effect="dark"
                                style="width: 100%"
                                @selection-change="handleSelectionChange">
                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    label="编号"
                                    width="60">
                                <template slot-scope="scope">{{ scope.row.goodsId }}</template>
                            </el-table-column>
                            <el-table-column
                                    label="商品名称"
                                    width="180">
                                <template slot-scope="scope">{{ scope.row.goodsName }}</template>
                            </el-table-column>
                            <el-table-column
                                    prop="salePrice"
                                    label="售价"
                                    width="60">
                            </el-table-column>
                            <el-table-column
                                    prop="storeCount"
                                    label="库存"
                                    width="60">
                            </el-table-column>
                            <el-table-column
                                    prop="brandName"
                                    label="品牌"
                                    width="60">
                            </el-table-column>
                            <el-table-column
                                    prop="dateStr"
                                    label="创建时间"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="productFactory"
                                    label="生产公司"
                                    >
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            @click="handleEdit(scope.row)">编辑</el-button>
                                    <el-button
                                            size="mini"
                                            type="danger"
                                            @click="handleDelete(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
            </el-main>
            <el-footer>
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageNum"
                            :page-sizes="[8, 16, 24, 48]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </el-footer>
        </el-container>
    </div>
</template>
<script>
    export default {
        name: "Goods",
        data() {
            return {
                roleName: "",
                addFormView:false,
                modifyFormView:false,
                tableData: [],
                brandList:[],
                productTypeList:[],
                goodsTypeList:[],
                pageNum:1,
                pageSize:8,
                total:0,
                searchName:"",
                searchBrand:"",
                fileList: {},
                dialogVisible: false,
                dialogImageUrl: '',
                status1: false,
                ids:'',
                imageUrl: '',

                picture:'',
                addForm: {
                    goodsName: '',
                    originalPrice:'',
                    salePrice:'',
                    storeCount:'',
                    brandId:'',
                    productTypeId:'',
                    goodTypeId:'',
                    productFactory:'',
                    productTime:'',
                    shelfLife:'',
                    goodsStatus:'',
                    description: '',
                    cover:'',
                },
                modifyForm:{},
                rules: {
                    goodsName: [
                        { required: true, message: '请输入商品名称', trigger: 'blur' }
                    ],
                    originalPrice: [
                        {type:'number',required: true, min:0, message: '请输入一个正数', trigger: 'blur' }
                    ],
                    salePrice:[
                        {type:'number',required: true, min:0,required: true, message: '请输入一个正数', trigger: 'blur' }
                    ],
                    storeCount:[
                        {type:'number',required: true, min:0,required: true, message: '请输入一个正数', trigger: 'blur' }
                    ],
                    brandId:[
                        {type:'number',required: true, min:1,message: '请选择品牌', trigger: 'blur' }
                    ],
                    productTypeId:[
                        {type:'number',required: true, min:1,message: '请选择一级分类', trigger: 'blur' }
                    ],
                    goodTypeId:[
                        {type:'number',required: true, min:1,message: '请选择二级分类', trigger: 'blur' }
                    ],
                    productFactory:[
                        { required: true, message: '请输入供应商名称', trigger: 'blur' }
                    ],
                    productTime:[
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    shelfLife:[
                        {type:'number',required: true, min:0,required: true, message: '请输入一个正数', trigger: 'blur' }
                    ],
                    description: [
                        { required: true, message: '请填写商品描述', trigger: 'blur' }
                    ]
                }
            }
        },
        created(){
            this.findTypes();
            this.search();
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val;
                let ids ="";
                val.forEach((item,index)=>{
                    ids +="," + item.goodsId;
                })
                ids = ids.substring(1);
                this.ids = ids;
                console.log(this.ids)
            },
            handleSizeChange(val){
                this.pageSize = val;
                this.pageNum = 1;
                this.search();
            },
            handleCurrentChange(val){
                this.pageNum = val;
                this.search();
            },
            search() {
                let url = this.$baseUrl+"/goods/goodsList";
                this.axios.get(url,{
                    params:{
                        pageNum:this.pageNum,
                        pageSize:this.pageSize,
                        goodsName:this.searchName,
                        brand:this.searchBrand
                    }
                }).then((res)=>{
                    this.tableData = res.data.data.list;
                    this.total = res.data.data.total;
                })
            },
            findTypes(){
                let url = this.$baseUrl+"/goods/findAllTypes";
                this.axios.get(url).then((res)=>{
                    this.brandList = res.data.data.brandList;
                    this.productTypeList = res.data.data.productTypeList;
                    this.goodsTypeList = res.data.data.goodsTypeList;
                })
            },

            handleDelete(row) {
                this.ids = row.goodsId;
                this.removeAll();
            },

            //提交添加表单
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.addForm.goodsStatus = this.status1?1:0;
                        let url = this.$baseUrl+"/goods/addGoods";
                        this.axios.post(url,JSON.stringify(this.addForm)).then((res)=>{
                            if(res.data.code==200){
                                this.status1 = false;
                                this.$message({
                                    message: res.data.message,
                                    type: 'success',
                                });
                            }
                            this.search();
                            this.$refs[formName].resetFields();
                            this.addFormView = false;
                        })
                    } else {
                        console.log('提交失败，请检查表单数据是否符合要求!!');
                        return false;
                    }
                });
            },
            //重置添加表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //根据id查询商品信息并回显
            handleEdit(row) {
                console.log(row.goodsId);
                let url = this.$baseUrl+"/goods/findGoodsById";
                this.axios.get(url,{
                    params:{
                        goodsId:row.goodsId
                    }
                }).then((res)=>{
                    if(res.data.code==200){
                        this.modifyForm = res.data.data;
                        this.status1 = this.modifyForm.goodsStatus==1?true:false;
                        this.imageUrl = "" + res.data.data.cover;
                        this.modifyFormView = true;
                    }
                })
            },
            //提交修改表单
            modifyGoods(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.modifyForm.goodsStatus = this.status1?1:0;
                        let url = this.$baseUrl+"/goods/modifyGoods";
                        this.axios.put(url,JSON.stringify(this.modifyForm)).then((res)=>{
                            if(res.data.code==200){
                                this.$message({
                                    message: res.data.message,
                                    type: 'success',
                                });
                            }
                            this.search();
                            this.modifyFormView = false;
                        })
                    } else {
                        console.log('提交失败，请检查表单数据是否符合要求!!');
                        return false;
                    }
                });
            },
            cancelModify(){
                this.modifyFormView = false;
            },
            removeAll(){
                if(this.ids != ''){
                    if(confirm('确认要删除吗？')){
                        let url = this.$baseUrl+"/goods/removeGoods";
                        this.axios.delete(url,{
                            params:{
                                ids:this.ids
                            }
                        }).then((res)=>{
                            if(res.data.code==200){
                                this.$message({
                                    message: res.data.message,
                                    type: 'success',
                                });
                                this.search();
                            }
                        })
                    }else{
                        this.ids = "";
                    }
                }else{
                    this.$message.error('请选择至少一件商品');
                }
            },

            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.addForm.cover = res.data;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>